<template>
    <div class="">
        <div class="outmain ba_f">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>打印机管理</span>
                </div>
            </div>
            <div class="ba_f8 pad_20">
                <div class="lh25 msgtext fon_12">
                    温馨提示：请按照我们指定的打印机型号进行相关配置，同品牌其他型号不保证可以正常打印；<br>
                    1、易联云系列支持K4、K5、K6等型号打印机，建议购买gprs版本更加稳定，易联云开发平台<a href="https://dev.yilianyun.net/" target="_blank">https://dev.yilianyun.net/</a>；<br>
                    2、飞鹅打印机均支持58mm尺寸系列，建议购买FP-58W型号，飞鹅开发平台<a href="https://admin.feieyun.com/login.php" target="_blank">https://admin.feieyun.com/login.php</a>。<br>
                    3、标签打印机仅支持FP-N20W型号，其他型号不保证可以正常打印，飞鹅开发平台<a href="https://admin.feieyun.com/login.php" target="_blank">https://admin.feieyun.com/login.php</a>。
                </div>
            </div>
            <el-button type="primary" size="medium" @click="handleEdit">添加打印机</el-button>
            <div class="mar_t20">
                <el-table
                        :data="list"
                        v-loading="listLoading"
                        :element-loading-text="elementLoadingText"
                        style="width: 100%">
                    <el-table-column
                            prop="name"
                            label="打印机名称"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="type"
                            label="打印机型号"
                    >
                        <template slot-scope="scope">
                            <div v-show="scope.row.type=='1'">易联云K4</div>
                            <div v-show="scope.row.type=='2'">飞鹅FP-58W</div>
                            <div v-show="scope.row.type=='3'">飞鹅标签打印机FP-N20W</div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="printMode"
                            label="打印方式">
                        <template slot-scope="scope">
                            <div v-show="scope.row.printMode=='1'">整单打印</div>
                            <div v-show="scope.row.printMode=='2'">按商品分组打印</div>
                            <div v-show="scope.row.printMode=='3'">一菜一单</div>
                            <div v-show="scope.row.printMode=='4'">按标签打印</div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="wmnum"
                            label="打印联数">
                    </el-table-column>
                    <el-table-column
                            prop="mode"
                            label="打印模式">
                        <template slot-scope="scope">
                            <div v-show="scope.row.pattern=='1'">商家联</div>
                            <div v-show="scope.row.pattern=='2'">顾客联</div>
                            <div v-show="scope.row.pattern=='3'">厨房联</div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="support"
                            label="打印类型">
                        <template slot-scope="scope">
                            <div v-show="scope.row.support=='2'">堂食</div>
                            <div v-show="scope.row.support=='3'">快餐</div>
                            <div v-show="scope.row.support=='4'">当面付</div>
                            <div v-show="scope.row.support=='5'">排队</div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="状态"
                            label="打印机状态">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.display" active-value="1" inactive-value="2"
                                       @change="changeSwitch(scope.row)"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="操作">
                        <template slot-scope="scope">
                            <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
                            <el-button type="text" size="small" @click="handleTest(scope.row)">测试打印</el-button>
                            <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="page.total"
                        :page-size="page.pagesize"
                        :current-page.sync='page.currentPage'
                        @current-change="handleCurrentChange">
                </el-pagination>
                <edit ref="edit" @fetchData="fetchData"></edit>
            </div>
        </div>
        <div style="height: 0; overflow: hidden">
          <ElementPrint :data="printData" ref="print" />
        </div>
    </div>
</template>
<script>
    import Edit from "../../../views/instore/components/inprinteredit";
    import {printList, modifyPrint, printTest} from "@/api/order";
    import ElementPrint from "@/views/order/components/elementPrint";
    import {mapState} from "vuex";

    export default {
        components: {Edit,ElementPrint},
        computed: {
            ...mapState(['storeId']),
        },
        created() {
            this.fetchData();
        },
        data() {
            return {
                list: [],
                listLoading: false,
                selectRows: "",
                elementLoadingText: "正在加载...",
                page: {
                    total: 0,
                    size: 10,
                    currentPage: 1,
                },
                printData:{},
            }
        },
        methods: {
            async fetchData() {
                this.listLoading = true;
                const {data, count} = await printList({page: this.page.currentPage,type:'instore',storeId:this.storeId});
                this.list = data;
                this.page.total = count;
                setTimeout(() => {
                    this.listLoading = false;
                }, 100);
            },
            setSelectRows(val) {
                this.selectRows = val;
            },
            handleEdit(row) {
                this.$refs["edit"].setStoreId(this.storeId);
                this.$refs["edit"].setType('1');
                if (row.id) {
                    this.$refs["edit"].showEdit(row);
                } else {
                    this.$refs["edit"].showEdit();
                }
            },
            handleDelete(row) {
                if (row.id) {
                    this.$baseConfirm("你确定要删除当前项吗", null, async () => {
                        const {msg} = await modifyPrint({id: row.id, type: '2'});
                        this.$baseMessage(msg, "success");
                        this.fetchData();
                    });
                } else {
                    if (this.selectRows.length > 0) {
                        const id = this.selectRows.map((item) => item.id);
                        this.$baseConfirm("你确定要删除选中项吗", null, async () => {
                            const {msg} = await modifyPrint({id});
                            this.$baseMessage(msg, "success");
                            this.fetchData();
                        });
                    } else {
                        this.$baseMessage("未选中任何行", "error");
                        return false;
                    }
                }
            },
            async handleTest(row) {
              if(row.type=='4'){
                this.printData = {
                  appointment: "2",
                  boxMoney: "2.00",
                  couponPreferential: "0.00",
                  createdAt: "2021-04-16 14:49:04",
                  deliveryMode: "1",
                  deliveryMoney: "8.80",
                  deliveryPreferential: "0.00",
                  discount: "0.00",
                  goodsArr: [],
                  id: "416",
                  lat: "1155",
                  lng: "852255",
                  mealOutState: "2",
                  mealOutTime: null,
                  money: "44.80",
                  newMoney: "0.00",
                  num: "2",
                  originMoney: "34.00",
                  otherInfo: null,
                  outTradeNo: "20210416144904226870",
                  payAt: "1618555747",
                  payMode: "5",
                  platformCouponPreferential: "0.00",
                  preferentialMoney: "0.00",
                  receiptAt: null,
                  receivedAddress: "北京市洪山区北京大厦25号",
                  receivedName: "测试",
                  receivedTel: "54444515321314",
                  refundType: "1",
                  selfCode: null,
                  serviceAt: "15:19",
                  state: "2",
                  storeId: "1",
                  storeName: "测试店铺",
                  takeNo: "22",
                  uniacid: "122",
                  userNote: "",
                };
                this.$nextTick(() => {
                  this.$refs.print.printElement(row.name);
                });
              }else {
                const {msg} = await printTest({id: row.id});
                this.$baseMessage(msg, "success");
                this.fetchData();
              }
            },
            handleCurrentChange(val) {
                this.page.currentPage = val;
                this.fetchData();
            },
            async changeSwitch(row) {
                const {msg} = await modifyPrint({id: row.id, display: row.display, type: '1'});
                this.$baseMessage(msg, "success");
                this.fetchData();
            },
        }
    }
</script>
